Page({
  includePoints: [], // 聚焦使用的坐标点集合

  data: {
    markers: [
      {
        id: 1,
        longitude: "113.838042",
        latitude: "22.626198",
        callout: {
          content: "北京千锋",
          color: "#ff0000",
          fontSize: "16",
          padding: 10,
          display: "ALWAYS", // 显示的方式
        },
      },
      {
        id: 2,
        width: 64,
        height: 64,
        longitude: "113.836868",
        latitude: "22.627218",
        iconPath: "/assets/icon_location.png",
      },
    ],

    polyline: [
      {
        points: [
          { longitude: 113.838042, latitude: 22.626198 },
          { longitude: 113.836868, latitude: 22.627218 },
        ],
        width: 5,
      },
    ],

    controls: [
      {
        id: 1,
        iconPath: "/assets/icon_tab1.png",
        position: {
          top: 0,
          left: 0,
          width: 100,
          height: 100,
        },
      },
    ],
  },

  onLoad() {
    this.mapCtx = wx.createMapContext("myMap");
    // 给 this.includePoints 赋值
    this.includePoints = this.data.markers.map((item) => ({
      id: item.id,
      longitude: item.longitude,
      latitude: item.latitude,
    }));
  },

  onTap(event) {
    console.log("event", event);
    // 新增标记点
    // this.setData({
    //   markers: [
    //     ...this.data.markers,
    //     {
    //       id: this.data.markers.length + 1,
    //       longitude: event.detail.longitude,
    //       latitude: event.detail.latitude,
    //     },
    //   ],
    // });

    this.mapCtx.translateMarker({
      markerId: 1,
      destination: {
        longitude: event.detail.longitude,
        latitude: event.detail.latitude,
      },
    });

    // 修改对应的 includePoints 中的值
    this.includePoints = this.includePoints.map((item) => {
      if (item.id === 1) {
        return {
          ...item,
          longitude: event.detail.longitude,
          latitude: event.detail.latitude,
        };
      } else {
        return item;
      }
    });

    console.log(this.includePoints, "===");
  },

  onTap4() {
    this.mapCtx.includePoints({
      padding: [100],
      points: this.includePoints,
    });
  },

  onMarkertap(event) {
    console.log("event", event);
  },

  /**
   * 获取用户的地理位置，然后将地址中心点设置到该位置
   *
   * 1. 地理位置相关的接口是需要开通权限的，个人类型小程序无法开通，企业类型可以。
   * 2. wx.getLocation 需要在 app.json 中 声明 permission 的 scope.userLocation
   * 3. 地理位置相关的接口 还需要再 app.json 中 配置 requiredPrivateInfos 字段
   */
  onTap1() {
    wx.getLocation({
      type: "gcj02", // 国测局02
      success: (res) => {
        console.log("res", res);
      },
    });
  },

  onTap2() {
    wx.chooseLocation({
      success: (res) => {
        console.log("res", res);
      },
    });
  },

  onTap3() {
    wx.openLocation({
      latitude: 0,
      longitude: 0,
    });
  },
});
